<!--
 * @Descripttion: 
 * @version: 生命周期父组件
 * @Author: wtzhang
 * @Date: 2021-07-20 13:20:07
 * @LastEditors: wtzhang
 * @LastEditTime: 2021-07-20 13:57:57
-->
<template>
  <div class="lifeCycle">
    <div class="title" style="text-align: center">生命周期对比</div><br>
    父组件：<button @click="isShow = !isShow" :class="!isShow ? 'active' : ''">显示隐藏子组件</button>
    <hr>
    <lifeCycleChild v-if="isShow" />
  </div>
</template>

<script lang="ts">
import lifeCycleChild from '../components/lifeCycleChild.vue'
import { defineComponent, ref } from 'vue'
export default defineComponent ({
  name: 'lifeCycle',
  components: {
    lifeCycleChild
  },
  setup(){
    const isShow = ref(true)
    return {
      isShow
    }
  }
})
</script>

<style>
  .lifeCycle {
    box-sizing: border-box;
    height: 100%;
    padding: 16px;
  }
  .active {
    background-color: red;
  }
</style>